<template>
  <div class="warp __warp">
    <div class="content">
      <div class="content__left">
        <div class="tag">
          <template v-for="(item, index) in tips">
            <el-tag size="small" :type="item.type" effect="dark" :key="index">{{
              item.text
            }}</el-tag>
          </template>
        </div>
        <div class="title">{{ data.title }}</div>
        <div class="message">
          <el-avatar size="small" :src="avatar"></el-avatar>
          <span class="name">Yvonne</span>
          <i class="icon iconfont icon-shijian"></i>
          <span class="time">{{
            data.createTime | dateFormat("yyyy-MM-dd")
          }}</span>
          <i class="icon iconfont icon-yanjing"></i>
          <span class="read">{{ data.readNumber }}</span>
        </div>
        <div class="content-html" v-html="data.content"></div>
      </div>
      <div class="content__right">
        <content-right />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ app }) {
    let data = await app.$axios.get(`/api/note/find/${app.context.params.id}`);
    return {
      data: data.data,
    };
  },
  computed: {
    tips() {
      try {
        if (this.data.tips) {
          let arr = this.data.tips.split("|"),
            data = [];
          arr.forEach((item) => {
            data.push({
              text: item,
              type: this.randownType(),
            });
          });
          return data;
        }
      } catch (error) {}
      return [];
    },
  },
  data() {
    return {
      avatar: require("~/assets/img/icon-tx.jpg"),
    };
  },
  methods: {
    randownType() {
      let arr = ["info", "success", "warning", "danger"];
      let index = Math.floor(Math.random() * 4);
      return arr[index];
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  .content {
    display: flex;
    // align-items: center;
    margin-top: 30px;
    .content__left {
      width: 750px;
      margin-right: 30px;
      background-color: white;
      padding: 30px;
      box-sizing: border-box;
      .tag {
        font-size: 0;
        margin-bottom: 10px;
        .el-tag {
          margin-right: 10px;
        }
      }
      .title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 15px;
      }
      .message {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-bottom: 30px;
        color: #566573;
        .name,
        .time,
        .read {
          margin: 0px 15px 0px 10px;
        }
      }
    }
    .content__right {
      flex: 1;
    }
  }
}
</style>